{% extends 'admin/base.html' %}

{% block title %}管理秘钥设置 - 管理后台{% endblock %}
{% block page_title %}管理秘钥设置{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2><i class="bi bi-key"></i> 管理秘钥设置</h2>
            <div>
                <a href="{% url 'bike:admin_dashboard' %}" class="btn btn-outline-secondary">
                    <i class="bi bi-arrow-left"></i> 返回仪表盘
                </a>
            </div>
        </div>

        <!-- 当前秘钥状态 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="bi bi-info-circle"></i> 当前状态
                </h5>
            </div>
            <div class="card-body">
                {% if current_key %}
                <div class="alert alert-success">
                    <h6><i class="bi bi-check-circle"></i> 秘钥已设置</h6>
                    <p class="mb-0">
                        <strong>当前秘钥：</strong><code class="fs-4">{{ current_key.secret_key }}</code><br>
                        <strong>设置时间：</strong>{{ current_key.created_at|date:"Y年m月d日 H:i" }}<br>
                        <strong>设置者：</strong>{{ current_key.created_by.username }}
                    </p>
                </div>
                {% else %}
                <div class="alert alert-warning">
                    <h6><i class="bi bi-exclamation-triangle"></i> 未设置秘钥</h6>
                    <p class="mb-0">请设置4位数字管理秘钥，用于验证违章信息提交权限。</p>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- 设置新秘钥 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="bi bi-gear"></i> 设置新秘钥
                </h5>
            </div>
            <div class="card-body">
                <form method="post">
                    {% csrf_token %}
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="{{ form.secret_key.id_for_label }}" class="form-label">
                                    {{ form.secret_key.label }}
                                </label>
                                {{ form.secret_key }}
                                {% if form.secret_key.help_text %}
                                <div class="form-text">{{ form.secret_key.help_text }}</div>
                                {% endif %}
                                {% if form.secret_key.errors %}
                                <div class="text-danger">
                                    {% for error in form.secret_key.errors %}
                                    <small>{{ error }}</small>
                                    {% endfor %}
                                </div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <div class="form-check">
                                    {{ form.is_active }}
                                    <label class="form-check-label" for="{{ form.is_active.id_for_label }}">
                                        {{ form.is_active.label }}
                                    </label>
                                </div>
                                {% if form.is_active.help_text %}
                                <div class="form-text">{{ form.is_active.help_text }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    
                    <div class="alert alert-info">
                        <i class="bi bi-info-circle"></i>
                        <strong>注意：</strong>
                        <ul class="mb-0 mt-2">
                            <li>秘钥必须是4位数字</li>
                            <li>设置新秘钥会自动禁用所有旧秘钥</li>
                            <li>只有输入正确秘钥才能提交违章信息</li>
                        </ul>
                    </div>
                    
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-save"></i> 保存秘钥
                    </button>
                </form>
            </div>
        </div>

        <!-- 秘钥历史记录 -->
        {% if key_history %}
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="bi bi-clock-history"></i> 秘钥历史记录
                </h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>秘钥</th>
                                <th>状态</th>
                                <th>设置时间</th>
                                <th>设置者</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for key in key_history %}
                            <tr>
                                <td>
                                    <code>{{ key.secret_key }}</code>
                                </td>
                                <td>
                                    {% if key.is_active %}
                                    <span class="badge bg-success">启用</span>
                                    {% else %}
                                    <span class="badge bg-secondary">禁用</span>
                                    {% endif %}
                                </td>
                                <td>{{ key.created_at|date:"Y-m-d H:i" }}</td>
                                <td>{{ key.created_by.username }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 限制秘钥输入为数字
    const secretKeyInput = document.getElementById('{{ form.secret_key.id_for_label }}');
    if (secretKeyInput) {
        secretKeyInput.addEventListener('input', function(e) {
            // 只允许输入数字
            e.target.value = e.target.value.replace(/[^0-9]/g, '');
            // 限制长度为4位
            if (e.target.value.length > 4) {
                e.target.value = e.target.value.slice(0, 4);
            }
        });
        
        // 阻止粘贴非数字内容
        secretKeyInput.addEventListener('paste', function(e) {
            e.preventDefault();
            const paste = (e.clipboardData || window.clipboardData).getData('text');
            const numbers = paste.replace(/[^0-9]/g, '').slice(0, 4);
            e.target.value = numbers;
        });
    }
});
</script>
{% endblock %}
